import React, { useState } from 'react';
import {Button, Input, Modal, Checkbox} from 'antd';
const { TextArea } = Input;
const App = (props) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    React.useImperativeHandle(props.onRef, () => {
        return {
            showModal: showModal,
        };
    });
    return (
        <>
            <Modal title="报告复制" width={1000} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <div style={{display: 'flex'}}>
                    <div style={{width: '300px'}}>
                        <div>
                            样本号输入:<br />
                            <Checkbox>起始终止号</Checkbox><br />
                            <Checkbox>自定义格式</Checkbox>
                        </div>
                        <div>
                            功能细化:<br />
                            <Checkbox>只处理病人结果</Checkbox><br />
                            <Checkbox>通道匹配结果</Checkbox><br />
                            <Checkbox>只处理病人信息</Checkbox>
                        </div>
                    </div>
                    <div style={{width: '300px'}}>
                        <div>
                            源样本:<br />
                            <div style={{display: 'flex'}}>
                                <div>登记日期：</div><Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                仪器：<Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                样本范围：<Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                起始样本号：<Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                终止样本号：<Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                指定项目：<Input style={{width: '120px'}}/>
                            </div>
                        </div>
                    </div>
                    <div style={{width: '300px'}}>
                        <div>
                            目标样本:<br />
                            <div style={{display: 'flex'}}>
                                <div style={{width: '80px'}}>登记日期：</div><Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                <div style={{width: '80px'}}>仪器：</div><Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                <div style={{width: '80px'}}>样本范围：</div><Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                <div style={{width: '80px'}}>起始样本号：</div><Input style={{width: '120px'}}/>
                            </div>
                            <div style={{display: 'flex'}}>
                                <div style={{width: '80px'}}>终止样本号：</div><Input style={{width: '120px'}}/>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
        </>
    );
};

export default App;
